<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 头部搜索栏 -->
      <el-form
        ref="refFormData"
        :model="formData"
        label-width="5rem"
        class="formData"
        :inline="true"
      >
        <el-form-item label="标签名称">
          <el-input v-model="formData.tagName"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="formData.region" placeholder="请选择">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
          <el-button size="mini" @click="onClear">清除</el-button>
          <el-button type="primary" size="mini" @click="onSearch"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item class="right">
          <el-button type="text" @click="toBackaSubject" v-show="this.$route.query.id"><i class="el-icon-back"></i>返回学科</el-button>
          <el-button type="success" @click="onAdd">新增标签</el-button>
        </el-form-item>
      </el-form>
      <!-- 提示 -->
      <el-alert type="info" show-icon> 数据一共{{ total }}条 </el-alert>
      <!-- 表格 -->
      <el-table style="width: 100%" :data="tableData">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="tagName" label="标签名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template v-slot="{ row }">
            {{ dateformat(row.addDate) }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template v-slot="{ row }">
            {{ row.state === 1 ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button type="text" @click="onState(row)">
              {{ row.state === 1 ? '禁用' : '启用' }}
            </el-button>
            <el-button
              type="text"
              @click="onEdit(row)"
              :disabled="row.state === 1 ? true : false"
              >修改</el-button
            >
            <el-button
              type="text"
              @click="onDelete(row)"
              :disabled="row.state === 1 ? true : false"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部 -->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          layout="prev, pager, next, sizes, jumper"
          :total="total"
          :page-sizes="[5, 10, 20, 50]"
          :current-page="page.page"
          :page-size="page.pagesize"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 新增对话框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
      <el-form
        :model="editForm"
        :rules="rules"
        ref="editFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="所属学科" prop="subjectName" v-if="!this.$route.query.id">
          <el-select v-model="editForm.subjectID">
            <el-option
              v-for="item in subList"
              :key="item.id"
              :label="item.subjectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="tagName">
          <el-input v-model="editForm.tagName"></el-input>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onOk">确 定</el-button>
      </el-row>
    </el-dialog>
    <!-- 学科管理对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="subjectVisible"
      width="50%"
    >
      <el-form :model="subjectForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
         <el-form-item label="目录名称" prop="tagName">
           <el-input v-model="subjectForm.tagName"></el-input>
         </el-form-item>
      </el-form>
      <el-row>
        <el-button @click="subjectVisible = false">取 消</el-button>
        <el-button type="primary" @click="subjectVisible = false"
          >确 定</el-button
        >
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, remove, update, changeState } from '../../api/hmmm/tags'
import moment from 'moment'
import { list as subjectList } from '../../api/hmmm//subjects'
export default {
  data() {
    return {
      refFormData: '',
      // 输入框内容
      formData: {
        tagName: '',
        region: ''
      },
      total: 0,
      tableData: undefined,
      // 分页
      page: {
        page: 1,
        pagesize: 5
      },
      dialogVisible: false, // 默认隐藏对话框
      // 对话框数据内容
      editForm: {
        id: '',
        subjectID: '',
        tagName: '',
        subjectName: ''
      },
      // 校验规则
      rules: {
        subjectID: [
          { required: true, message: '请输入所属学科', trigger: 'blur' }
        ],
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      subList: [],
      title: '',
      subjectVisible: false, // 默认隐藏学科管理对话框
      // 学科管理对话框内容
      subjectForm: {
        tagName: ''
      }
    }
  },
  async created() {
    // 1.请求列表数据
    this.tabelList()
  },
  computed: {},
  methods: {
    // 1.请求列表数据
    async tabelList() {
      if (this.$route.query.id) {
        const res = await list({
          page: this.page.page,
          pagesize: this.page.pagesize,
          subjectID: this.$route.query.id
        })
        this.tableData = res.data.items
        this.total = res.data.counts
        return
      }
      const res = await list({
        page: this.page.page,
        pagesize: this.page.pagesize
      })
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    // 2.格式时间
    dateformat(time) {
      return moment(time).format('YYYY-MM-DD h:mm:ss')
    },
    // 3.为搜索按钮绑定事件
    async onSearch() {
      const { data } = await list(this.formData)
      this.tableData = data.items
      this.total = data.counts
    },
    // 4.点击切换分页
    handleCurrentChange(value) {
      this.page.page = value
      this.tabelList()
    },
    // 5.监听切换页面改变页面条数
    handleSizeChange(value) {
      this.page.pagesize = value
      this.tabelList()
    },
    // 6.清空输入框内容
    onClear() {
      this.formData = {
        name: '',
        region: ''
      }
    },
    // 7.为新增按钮绑定事件
    async onAdd() {
      this.dialogVisible = true
      this.title = '新增目录'
      const res = await subjectList()
      this.subList = res.data.items
    },
    // 8.为确定按钮绑定事件
    async onOk() {
      if (this.editForm.id) {
        const res = await update(this.editForm)
        if (res.status !== 200) return this.$confirm('修改失败')
        this.$message.success('修改成功')
        this.editForm = {
          subjectID: '',
          tagName: '',
          subjectName: ''
        }
        this.dialogVisible = false
        this.tabelList()
        return
      }
      add(this.editForm)
      this.$message.success('新增成功')
      this.dialogVisible = false
      this.tabelList()
    },
    // 9.为修改按钮绑定事件
    async onEdit(row) {
      this.dialogVisible = true
      this.title = '修改目录'
      const res = await subjectList()
      this.subList = res.data.items
      this.editForm.subjectID = row.subjectID
      this.editForm.tagName = row.tagName
      this.editForm.subjectName = row.subjectName
      this.editForm.id = row.id
    },
    // 10.为删除按钮绑定事件
    async onDelete(row) {
      try {
        await this.$confirm('确认删除?')
        await remove({ id: row.id })
        this.tabelList()
        this.$message.success('删除成功')
      } catch (e) {
        this.$message.error('删除失败')
      }
    },
    // 11.改变状态值
    async onState(row) {
      if (row.state === 1) {
        row.state = 0
        await changeState({
          id: row.id,
          state: row.state
        })
      } else {
        row.state = 1
        await changeState({
          id: row.id,
          state: row.state
        })
      }
    },
    // 12.返回学科管理
    toBackaSubject() {
      this.$router.push('list')
    }
  }
}
</script>

<style scoped lang='less'>
.formData {
  position: relative;
  .right {
    position: absolute;
    right: 0;
  }
}
/deep/ .el-icon-info {
  font-size: 1rem;
}
/deep/.el-alert__description {
  font-size: 0.8125rem;
  line-height: 1.125rem;
  margin-top: 0;
}
</style>
